<template>
  <div id="iot-app-set" class="set-wrap-2">
        <el-form ref="addApp" :model="form" label-width="140px" label-position="right" :rules="addAppRules">
          <el-row>
            <el-col :span="11" class="panel-left">
              <el-form-item label="应用名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入应用名称"></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="app_type">
                <el-radio v-model="form.app_type" label="1">微信公众号</el-radio>
                <el-radio v-model="form.app_type" label="2">开放Api</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row v-if="form.app_type == 1">
              <el-col :span="11" class="panel-left">
                <el-divider>公众号</el-divider>
                <el-form-item label="公众号Id" prop="app_id">
                  <el-input v-model="form.app_id" placeholder="请输入微信公众号id"></el-input>
                </el-form-item>
                <el-form-item label="公众号秘钥" prop="app_secret">
                  <el-input v-model="form.app_secret" placeholder="请输入微信公众号秘钥"></el-input>
                </el-form-item>
                <el-form-item label="安全验证文件名" prop="app_js_verify_file_name">
                  <el-input type="index" v-model="form.app_js_verify_file_name" placeholder="请输入安全验证文件名"></el-input>
                </el-form-item>
                <el-form-item label="安全验证文件内容" prop="app_js_verify_file_body">
                  <el-input v-model="form.app_js_verify_file_body" placeholder="请输入安全验证文件内容"></el-input>
                </el-form-item>

                <el-divider>商户号</el-divider>
                <el-form-item label="商户号id" prop="mch_id">
                  <el-input v-model="form.mch_id" placeholder="请输入微信商户号id"></el-input>
                </el-form-item>
                <el-form-item label="商户号秘钥V3" prop="mch_api_key">
                  <el-input v-model="form.mch_api_key" placeholder="请输入微信商户号秘钥"></el-input>
                </el-form-item>
                <el-form-item label="商户号证书号" prop="mch_ssl_sn">
                  <el-input v-model="form.mch_ssl_sn" placeholder="请输入商户号"></el-input>
                </el-form-item>
                <el-form-item label="商户号证书key" prop="mch_ssl_key">
                  <el-input type="textarea" v-model="form.mch_ssl_key" placeholder="请输入商户号证书key" rows="5"></el-input>
                </el-form-item>
                <el-form-item label="商户号证书cert" prop="mch_ssl_cert">
                  <el-input type="textarea" v-model="form.mch_ssl_cert" placeholder="请输入商户号证书cert" rows="5"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="13" class="panel-right">
                <h4>添加说明:</h4>
                <ol>
                  <li>基础配置
                    <ul>
                      <li><b>公众号Id</b> 为微信开户邮件中的（公众账号APPID或者应用APPID）</li>
                      <li><b>公众号密钥</b> AppSecret：可使用APPID对应的公众平台登录 <a href="http://mp.weixin.qq.com" target="_blank">http://mp.weixin.qq.com</a> 的开发者中心获取AppSecret</li>
                      <li><b>安全验证文件</b> 是公众号域名配置时安全校验文件下载后，对应的文件名称及文件内容。</li>
                      <li>注意：公众号访问域名为 <code style="background: #eaffea">{{$tool.getUser().wx_cli_url}}</code> ，需要先配置安全验证文件并保存后，再公众号配置才能通过。</li>
                      <li><b>商户号</b> 商户号为微信支付开户邮件中的商户号</li>
                      <li><b>商户号API密钥</b> API密钥为商户平台登录账户和密码登录 <a href="http://pay.weixin.qq.com" target="_blank">http://pay.weixin.qq.com</a> 平台设置的“API密钥</li>
                      <li><b>商户号证书</b> 申请支付证书后，点击下载证书；下载旁有个证书号需要复制出来；下载后的压缩包解压后，内部 <code>apiclient_cert.pem</code> 文件内容为<b>商户号证书cert</b>，内部 <code>apiclient_key.pem</code> 文件内容为 <b>商户号证书cert</b></li>
                    </ul>
                  </li>

                  <li>登录https://mp.weixin.qq.com/ 公众号设置-功能设置 配置域名 <code style="background: #eaffea">{{$tool.getUser().wx_cli_url}}</code>
                    <ul>
                      <img src="../../../assets/img/img1.png" alt="步骤图">
                    </ul>
                  </li>

                  <li>登录https://pay.weixin.qq.com/ 产品中心-开发配置-支付配置添加支付授权目录<code style="background: #eaffea">{{$tool.getUser().wx_cli_url}}</code>/order/
                    <ul>
                      <img src="../../../assets/img/img2.png" alt="步骤图">
                    </ul>
                  </li>
                </ol>
              </el-col>
            </el-row>


          <div v-if="form.app_type == 2" style="min-height: 500px">
            <!--开放应用设置-->
          </div>



          <el-form-item class="submitButton">
            <el-button type="success" @click="submitButton">保存</el-button>
          </el-form-item>
        </el-form>

  </div>
</template>

<script>
export default {
  name: "IotAppSet",
  props:{
    detail: Object // 详情
  },
  data() {
    return {
      type_name: '添加',
      form: {
        id: 0,
        name: '',
        app_type: '1',
        app_id: '',
        app_secret: '',
        mch_id: '',
        mch_api_key: '',
        mch_ssl_sn: '',
        mch_ssl_cert: '',
        mch_ssl_key: '',
        app_js_verify_file_name: '',
        app_js_verify_file_body: ''
      },
      addAppRules: {
        name: { required: true, message: "应用名称为必填" },
        app_type: { required: true, message: "请选择应用类型" },
        // 公众号
        app_id: { required: true, message: "请输入公众号id" },
        app_secret: { required: true, message: "请输入公众号秘钥" },
        app_js_verify_file_name: { required: true, message: "请输入安全验证文件名" },
        app_js_verify_file_body: { required: true, message: "请输入安全验证文件内容" },
        // 商户号
        mch_id: { required: true, message: "请输入商户号id" },
        mch_api_key: { required: true, message: "请输入商户号秘钥" },
        mch_ssl_sn: { required: true, message: "请输入商户号" },
        mch_ssl_cert: { required: true, message: "请输入商户号证书 cert" },
        mch_ssl_key: { required: true, message: "请输入商户号证书 cert" },
      }
    };
  },

  mounted() {
    console.log(this.detail)
    if (this.detail != undefined && this.detail.id > 0){
      this.type_name = '编辑'
      Object.assign(this.form, this.detail)
      this.form.app_type = this.form.app_type.toString()
    }
  },

  methods: {
    submitButton() {
      let data = this.$tool.copyJSON(this.form)
      data.app_type = Number(data.app_type)

      this.$refs.addApp.validate(valid => {
        if (!valid) {
          return this.$message.error("请完善数据再保存!");
        }
        this.$api.merchant.appset(data, res => {
          if (!res.status) {
            return this.$message.error(res.message);
          }
          this.$message.success(this.type_name+"成功!");
          this.$refs.addApp.resetFields();
          // 这里还是要触发一个外部参数，以达到关闭弹窗并刷新
          this.$emit('close')
        })
      });
    }
  }
};
</script>